<template id="address">
  <p>
    <!-- 地区 -->
    <el-form-item :label="nowLangue.area"  prop="area"  :rules="[{ required: true, message: '必填项'}]" class="label-w0">
        <el-select v-model="formInline.area" :placeholder="nowLangue.pleaseSelect" @change="areaChange">
            <el-option v-for="(area,index) in areaData" :key="index" :label="area.label" :value="area.value"></el-option>
        </el-select>
    </el-form-item>
    <!-- 国家 -->
    <el-form-item :label="nowLangue.nation"  prop="nation"  :rules="[{ required: true, message: '必填项'}]" class="label-w0">
        <el-select v-model="formInline.nation" :placeholder="nowLangue.pleaseSelect" @change="nationChange">
            <el-option v-for="(nation,index) in nationData" :key="index" :label="nation.label" :value="nation.value"></el-option>
        </el-select>
    </el-form-item>
    <br>
    <!-- 省 -->
    <el-form-item :label="nowLangue.province" prop="province"  :rules="[{ required: true, message: '必填项'}]" class="label-w0">
        <el-select v-model="formInline.province" :placeholder="nowLangue.pleaseSelect" @change="provinceChange">
            <el-option v-for="(province,index) in provinceData" :key="index" :label="province.label" :value="province.value"></el-option>
        </el-select>
    </el-form-item>
    <!-- 市 -->
    <el-form-item :label="nowLangue.city" prop="city"  :rules="[{ required: true, message: '必填项'}]" class="label-w0">
        <el-select v-model="formInline.city" :placeholder="nowLangue.pleaseSelect" @change="cityChange">
            <el-option v-for="(city,index) in cityData" :key="index" :label="city.label" :value="city.value"></el-option>
        </el-select>
    </el-form-item>
    <!-- 县(区) -->
    <el-form-item :label="nowLangue.county" prop="county"  :rules="[{ required: true, message: '必填项'}]" class="label-w0">
        <el-select v-model="formInline.county" :placeholder="nowLangue.pleaseSelect">
            <el-option v-for="(county,index) in countyData" :key="index" :label="county.label" :value="county.value"></el-option>
        </el-select>
    </el-form-item>  
  </p>
</template>
<script>
export default {
	name:"v-address",
  data() {
    return {
      nowLangue: {},
      areaData:[],
      nationData:[],
      provinceData:[],
      cityData:[],
      countyData:[],
      flag:false
    }
  },
	props:{
    //disabled
    isChecked:{
			type:Boolean,
			default:false
		},
    //disabled(input)
    isInputChecked:{
      type:Boolean,
      default:false
    },
    //readonly
    isReadonly:{
      type:Boolean,
      default:false
    },
    //input还是select
    isEdit:{
      type:Boolean,
      default:false
    },
    //form表单
    formInline:{
      type:Object,
      default(){
        return {}
      }
    },
    result:{
      type:Object,
      default(){
        return {}
      }
    },
    //省市区县的字段名
    data:{
      type:Object,
      default(){
        return {}
      }
    }
	},
  created:function(){
    this.languageType=="zh"?this.nowLangue=this.language.zh:this.nowLangue=this.language.en;
  },
  computed:{
    languageType(){
      return this.$store.state.languageType;
    }
  },
  watch:{
    languageType(){
      this.languageType=="zh"?this.nowLangue=this.language.zh:this.nowLangue=this.language.en;
    },
    result(){
      this.flag=false;
      this.getAreaData();
      if(!!this.result.area){
        this.getNationData(this.result.area);
      }
      if(!!this.result.nation){
        this.getProvinceData(this.result.nation);
      }
      if(!!this.result.province){
        this.getCityData(this.result.province);
      }
      if(!!this.result.city){
        this.getCountyData(this.result.city);
      }
      this.formInline.area=this.result.area;
      this.formInline.nation=this.result.nation;
      this.formInline.province=this.result.province;
      this.formInline.city=this.result.city;
      this.formInline.county=this.result.county;
      var _this=this;
      setTimeout(function () {
        _this.flag=true;
      },0)

    }
  },
  mounted:function(){
    this.getAreaData();
    if(!!this.result.area){
      this.getNationData(this.result.area);
    }
    if(!!this.result.nation){
      this.getProvinceData(this.result.nation);
    }
    if(!!this.result.province){
      this.getCityData(this.result.province);
    }
    if(!!this.result.city){
      this.getCountyData(this.result.city);
    }
    this.flag=true;
  },
  methods:{
    //键值对转换
    toLabelValue(obj){
      var arr=[];
      for(var key in obj){
        arr.push(
          {label:obj[key],value:key}
        );
      }
      return arr;
    },
    // 获取地区的下拉列表
    getAreaData(){
      var _this=this;
      $.ajax({
          type:'GET',
          url:_this.iwm_service+'common/getAddressCascade?code=1&casFlag=area',
          cache:false,
          // data:JSON.stringify(tmp),
          dataType:'JSON',
          contentType:"application/json;charset=utf-8",
          success:function(data){
              if(data.success){
                _this.areaData=_this.toLabelValue(data.data);
              }else{
                  _this.common.errorTip(data.errorMessage);
              }
          }
      })
    },
    // 获取国家的下拉列表
    getNationData(area){
      var _this=this; 
      $.ajax({
          type:'GET',
          url:_this.iwm_service+'common/getAddressCascade?code='+area+'&casFlag=country',
          cache:false,
          // data:JSON.stringify(tmp),
          dataType:'JSON',
          contentType:"application/json;charset=utf-8",
          success:function(data){
              if(data.success){
                  _this.nationData=_this.toLabelValue(data.data);
              }else{
                  _this.common.errorTip(data.errorMessage);
              }
          }
      })
    },
    // 获取省的下拉列表
    getProvinceData(nation){
      var _this=this;
      $.ajax({
          type:'GET',
          url:_this.iwm_service+'common/getAddressCascade?code='+nation+'&casFlag=province',
          cache:false,
          // data:JSON.stringify(tmp),
          dataType:'JSON',
          contentType:"application/json;charset=utf-8",
          success:function(data){
              if(data.success){
                  _this.provinceData=_this.toLabelValue(data.data);
              }else{
                  _this.common.errorTip(data.errorMessage);
              }
          }
      })
    },
    //  获取市的下拉列表
    getCityData(province) {
      var _this=this;
      // debugger
      $.ajax({
          type:'GET',
          url:_this.iwm_service+'common/getAddressCascade?code='+province+'&casFlag=city',
          cache:false,
          // data:JSON.stringify(tmp),
          dataType:'JSON',
          contentType:"application/json;charset=utf-8",
          success:function(data){
              if(data.success){
                  _this.cityData=_this.toLabelValue(data.data);
              }else{
                  _this.common.errorTip(data.errorMessage);
              }
          }
      })
    },
    // 获取区的下拉列表
    getCountyData(city){
      var _this=this;
      // debugger
      $.ajax({
          type:'GET',
          url:_this.iwm_service+'common/getAddressCascade?code='+city+'&casFlag=conty',
          cache:false,
          // data:JSON.stringify(tmp),
          dataType:'JSON',
          contentType:"application/json;charset=utf-8",
          success:function(data){
              if(data.success){
                  _this.countyData=_this.toLabelValue(data.data); 
              }else{
                  _this.common.errorTip(data.errorMessage);
              }
          }
      })
    },
    areaChange(){
      var _this=this;
      if(_this.flag){
        var oldArea=_this.formInline.area;
        // debugger
        $.ajax({
            type:'GET',
            url:_this.iwm_service+'common/getAddressCascade?code='+oldArea+'&casFlag=country',
            cache:false,
            // data:JSON.stringify(tmp),
            dataType:'JSON',
            contentType:"application/json;charset=utf-8",
            success:function(data){
                if(data.success){
                  _this.nationData=_this.toLabelValue(data.data);
                }else{
                  _this.common.errorTip(data.errorMessage);
                }
            }
        })
      } 
    },
    nationChange(){
      var _this=this;
      if(_this.flag){
        var oldNation=_this.formInline.nation;
        $.ajax({
            type:'GET',
            url:_this.iwm_service+'common/getAddressCascade?code='+oldNation+'&casFlag=province',
            cache:false,
            // data:JSON.stringify(tmp),
            dataType:'JSON',
            contentType:"application/json;charset=utf-8",
            success:function(data){
                if(data.success){
                    _this.provinceData=_this.toLabelValue(data.data);
                }else{
                    _this.common.errorTip(data.errorMessage);
                }
            }
        })
      }
    },
    provinceChange() {
      var _this=this;
      if(_this.flag){
        var oldProvince=_this.formInline.province;
        $.ajax({
          type:'GET',
          url:_this.iwm_service+'common/getAddressCascade?code='+oldProvince+'&casFlag=city',
          cache:false,
          // data:JSON.stringify(tmp),
          dataType:'JSON',
          contentType:"application/json;charset=utf-8",
          success:function(data){
            if(data.success){
                _this.cityData=_this.toLabelValue(data.data);
                if(_this.cityData){
                  _this.formInline.city=_this.cityData[0].value;
                }
            }else{
                _this.common.errorTip(data.errorMessage);
            }
          }
        })
      }      
    },
    cityChange(){
      var _this=this;
      if(_this.flag){
        var oldCity=_this.formInline.city;
        // debugger
        $.ajax({
            type:'GET',
            url:_this.iwm_service+'common/getAddressCascade?code='+oldCity+'&casFlag=conty',
            cache:false,
            // data:JSON.stringify(tmp),
            dataType:'JSON',
            contentType:"application/json;charset=utf-8",
            success:function(data){
                if(data.success){
                  _this.countyData=_this.toLabelValue(data.data); 
                  if(_this.countyData){
                    _this.formInline.county=_this.countyData[0].value; 
                  }  
                }else{
                  _this.common.errorTip(data.errorMessage);
                }
            }
        })
      }
    }
  }
}
</script>

